<template>
  <div class="search-result-container">
    <div v-if='noData'>
      暂无数据
    </div>
    <van-list
      v-else
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
      <van-cell 
        v-for="(item,index) in resultList" 
        :key="index" 
        :title="item.title" 
      />
    </van-list>
  </div>
</template>

<script>
import {getSearchResultApi} from '@/api/search'

export default {
  name: "SearchResult",
  components: {},
  props: {
    isLoadResult:false,
    searchText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      resultList: [],
      loading: false,
      finished: false,
      page: 1,
      perPage: 15,
      totalCount: 0,
      noData: false
    };
  },
  computed: {},
  watch: {
    isLoadResult: {
      handler() {
        this.onLoad()
      },
      immediate: true
    }
  },
  methods: {
    async onLoad() {
      try {
        // 1.请求获取数据
          const {data} = await getSearchResultApi(this.page,this.perPage,this.searchText);

          // 2.将数据放到数据列表中
          const {results} = data.data
          this.resultList.push(...results);

          this.totalCount = data.data.total_count;

          // 3.关闭本次的loading
          this.loading = false;
          
          // 4.判断是否还有数据
          if (results.length) {
            // 如果有，则更新获取下一页数据的页码
            this.page++;
          } else {
            //  如果没有，则把finished设置为true,关闭加载更多
            if (this.resultList.length === this.totalCount) {
              this.finished = true;
            } 
          }
          if (this.resultList.length === 0 && this.page === 1) {
            this.noData = true;
          }
      } catch (error) {
        this.$toast("搜索结果加载失败")
      }

      // 下面这个判断了有没有显示搜索结果页 isLoadResult
      // try {
      //   if (this.isLoadResult) {
      //     // 1.请求获取数据
      //     const {data} = await getSearchResultApi(this.page,this.perPage,this.searchText);

      //     // 2.将数据放到数据列表中
      //     const {results} = data.data
      //     this.resultList.push(...results);

      //     this.totalCount = data.data.total_count;

      //     // 3.关闭本次的loading
      //     this.loading = false;
          
      //     // 4.判断是否还有数据
      //     if (results.length) {
      //       // 如果有，则更新获取下一页数据的页码
      //       this.page++;
      //     } else {
      //       //  如果没有，则把finished设置为true,关闭加载更多
      //       if (this.resultList.length === this.totalCount) {
      //         this.finished = true;
      //       } 
      //     }
      //     if (this.resultList.length === 0 && this.page === 1) {
      //       this.noData = true;
      //     }
      //   } 
      // } catch (error) {
      //   this.$toast("搜索结果加载失败")
      // }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.search-result-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 54px;
  overflow-y: auto;
}
</style>